<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>JRouter About</title>
    <meta content="JRouter About 关于" name="keywords"/>
    <meta content="JRouter About 关于" name="description"/>
    <meta th:replace="~{/template_home :: header}"/>
    <!--/*-->
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <link href="../../favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="../../css/bootstrap.css" rel="stylesheet"/>
    <link href="../../css/blog.css" rel="stylesheet"/>
    <!--*/-->
</head>
<body>
<div th:replace="~{/template_home :: body('about', '' ,  ~{::div#content})}">
    <div id="content">
        <div class="row">
            <div class="blog-header">
            </div>
            <div class="col-sm-10 blog-main">
                <div class="blog-post">
                    <h2>About <a class="btn-link" href="javascript:MT_Cookie.reset();">关</a>于</h2>
                    <hr/>
                    <p>
                        <svg></svg>
                        <!--<img th:src="|${base}/img/architecture.gif|" src="./img/architecture.gif" title="有一个架构图" alt="有一个机器人"/>-->
                    </p>
                    <p>
                    </p>
                </div><!-- /.blog-post -->
            </div><!-- /.blog-main -->
        </div><!-- /.row -->
    </div>
</div>
<footer th:replace="~{/template_home :: footer(false)}">
    <script src="../../js/d3.v4.js" type="text/javascript"></script>
</footer>
<script src="./js/d3.v4.js" th:src="|${base?:''}/js/d3.v4.js|" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function () {
        var svgWidth = 800;    // 可视区域宽度
        var svgHeight = 600;   // 可视区域高度
        var padding = 10;
        var dataset = MT_Cookie.get();
        //console.info(dataset);
        var svg = d3.select("svg").attr("width", svgWidth).attr("height", svgHeight),
            g = svg.append("g");
        //scale
        var xScale = d3.scaleLinear()
            .domain([0, window.screen.width])
            .range([padding, svgWidth - padding]);

        var yScale = d3.scaleLinear()
            .domain([0, window.screen.height])
            .range([padding, svgHeight - padding]);

        var circles = function (dataset) {
            var t = d3.transition()
                .duration(717);                     // JOIN new data with old elements.
            var circles = g.selectAll('circle')
                .data(dataset, function (d) {
                    return d;
                });
            // UPDATE old elements present in new data.
            circles
                .attr('fill', function (d, i) {
                    //console.info(i + "," + dataset.length);
                    return "hsl(" + i * (360 / (dataset.length || 1)) + ",100%,50%)";
                });
            // ENTER new elements present in new data.
            circles.enter().merge(circles).append('circle')
                .attr('cx', function (d) {
                    return xScale(d[0]);
                })
                .attr('cy', function (d) {
                    return yScale(d[1]);
                })
                .attr('r', function (d) {
                    return 10;
                })
                .attr('fill', function (d, i) {                             //console.info(i + "->" + dataset.length);
                    return "hsl(" + i * (360 / (dataset.length || 1)) + ",100%,50%)";
                })
                .attr('title', function (d) {
                    return d[0] + "," + d[1];
                })
                .transition(t).attr('r', function (d, i) {
                return 3;
            });
            // Remove old elements as needed.
            circles.exit()
                .transition(t)
                .style("fill-opacity", 1e-6)
                .remove();
        };
        d3.interval(function () {
            //console.info(MT_Cookie.get().length);
            //svg.selectAll('circle').remove();
            circles(MT_Cookie.get());

        }, 1500);
    });
    //]]>
</script>
</body>
</html>
